
// picplay组件实现
var nowplaydata;
var nowplayindex;
window.add_picplay = function(x, y, w, h, images, autoPlay, animationType, arrowState, indicatorMode, hide, tag, css, callback, divid) {
    // 注册到elementStore
    const id = divid || generateId('picplay');
    if (!elementStore.picplay) elementStore.picplay = {};
    elementStore.picplay[id] = {
        x, y, w, h, images, autoPlay, animationType, arrowState, indicatorMode, hide, tag, css, callback
    };
    
    // 处理divid参数
    if (divid === false) {
        divid = undefined;
    }
    // 设置参数默认值
    x = x || 100;
    y = y || 100;
    w = w || 300;
    h = h || 200;
    images = images || [];
    autoPlay = autoPlay !== false;
    animationType = animationType || 'default';
    arrowState = arrowState || 'hover';
    indicatorMode = indicatorMode || 'inside';
    hide = hide || false;
    tag = tag || '';
    css = css || '';
    callback = callback || null;
    
    // 参数有效性检查
    if (!Array.isArray(images) || images.length === 0) {
        console.error('图片轮播组件必须提供有效的图片数组');
        return null;
    }
    
    // 确保容器ID唯一性
    const containerId = 'picplay-' + Math.random().toString(36).substr(2, 9);
    
    // 创建轮播容器
    let container = document.createElement('div');
    container.id = containerId;
    container.className = 'layui-carousel';
    container.setAttribute('lay-filter', 'picplay-' + containerId);
    container.style.position = 'absolute';
    container.style.left = x + 'px';
    container.style.top = y + 'px';
    container.style.width = w + 'px';
    container.style.height = h + 'px';
    
    // 添加轮播图片专用样式
    const style = document.createElement('style');
    style.textContent = `
        .eht-carousel-img { width: 100%; height: 100%; }
        /* 轮播文字容器样式 */
        .eht_lunbo_carousel-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: inline-block;
            padding: 8px 15px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            color: white;
            max-width: 90%;
            white-space: nowrap;
            text-align: center;
        }

        /* 超链接文字样式 */
        .eht_lunbo_carousel-caption a {
            color: #fff;
            text-decoration: none;
        }

        /* 响应式调整 */
        @media (max-width: 600px) {
            .carousel-container {
                max-width: 100%;
            }
        }
    `;
    document.head.appendChild(style);
    
    // 创建轮播项容器
    let carouselItems = document.createElement('div');
    carouselItems.setAttribute('carousel-item', containerId);
    
    // 如果指定了divid，则添加到该元素
    if (divid && typeof divid === 'string') {
        const targetDiv = document.getElementById(divid);
        if (targetDiv) {
            targetDiv.appendChild(container);
        }
    } else {
        document.body.appendChild(container);
    }
    
    // 处理hide参数
    if (hide) {
        container.style.display = 'none';
    }
    
    // 存储tag到元素属性
    if (tag) {
        container.setAttribute('data-tag', tag);
    }
    
    // 添加CSS类
    if (css) {
        container.classList.add(css);
    }
    
    // 构建轮播项
    let items = '';
    images.forEach((img, index) => {
        // 处理JSON格式
        const imgObj = typeof img === 'object' && !Array.isArray(img) ? img : {
            pic: img.pic || (Array.isArray(img) ? (img[0] ? img[0].replace('pic=','').replace(/^['"]|['"]$/g, '') : '') : ''),
            title: img.title || (Array.isArray(img) ? (img[1] ? img[1].replace('title=','').replace(/^['"]|['"]$/g, '') : '') : ''),
            link: img.link || (Array.isArray(img) ? (img[2] ? img[2].replace(/^['"]|['"]$/g, '') : 'javascript:;') : 'javascript:;'),
            alt: img.alt || (Array.isArray(img) ? img[3] || '' : '')
        };

        nowplaydata = images[0];
        nowplayindex = 0;
        items += `<div class="layui-carousel-item">
            <img src="${imgObj.pic}" alt="${imgObj.alt || ''}" class="eht-carousel-img">
            ${imgObj.title ? 
                (imgObj.link && imgObj.link !== 'javascript:;' ? 
                    `<div class="eht_lunbo_carousel-caption"><a href="${imgObj.link}" target="_blank">${imgObj.title}</a></div>` : 
                    `<div class="eht_lunbo_carousel-caption">${imgObj.title}</div>`) : 
                ''}
        </div>`;
    });
    
    carouselItems.innerHTML = items;
    container.appendChild(carouselItems);
    document.body.appendChild(container);
    
    // 确保layui模块加载完成后再初始化轮播和事件监听
    if (typeof layui !== 'undefined') {
        layui.use(['carousel', 'form'], function() {
            var carousel = layui.carousel, form = layui.form;
            
            // 初始化轮播
            var carouselInst = carousel.render({
                elem: '#' + containerId,
                width: w + 'px',
                height: h + 'px',
                anim: animationType || 'default',
                arrow: arrowState || 'hover',
                indicator: indicatorMode || 'inside',
                autoplay: autoPlay !== false,
                interval: typeof autoPlay === 'number' ? autoPlay * 1000 : 3000
            });
            
            // 轮播切换事件监听
            carousel.on('change(picplay-' + containerId + ')', function(obj){
                nowplaydata = images[obj.index];
                nowplayindex = obj.index;
                //handleEvent('picplay', containerId, 1, '', tag, 0, 0, '', obj.index, 0, callback, divid);
            });
            
            // 鼠标事件监听
            container.addEventListener('click', function(e) {
                handleEvent('picplay', containerId, 1, nowplaydata, tag, e.clientX, e.clientY, '', nowplayindex, 0, callback, divid);
            });
            
        });
    } ;


// 键盘事件监听
container.addEventListener('keydown', function(e) {
        console.log('键盘事件监听:');
        handleEvent('picplay', containerId, 3, '', tag, 0, 0, e.key, 0, 0, callback, divid);
    });
    
    container.addEventListener('keyup', function(e) {
        handleEvent('picplay', containerId, 4, '', tag, 0, 0, e.key, 0, 0, callback, divid);
    });
    
    // 设置tabindex使容器可聚焦
    container.setAttribute('tabindex', '0');
    
    // 回调函数
    handleEvent('picplay', containerId, 0, '', tag, 0, 0, '', 0, 0, callback, divid);
    
    return divid;
}

window.del_picplay = function(id) {
    let elem = document.getElementById(id);
    if (elem) {
        elem.parentNode.removeChild(elem);
        // 从elementStore中移除
        if (elementStore.picplay && elementStore.picplay[id]) {
            delete elementStore.picplay[id];
        }
    }
}

window.upd_picplay = function(id, x, y, w, h, images, autoPlay, animationType, arrowState, indicatorMode, hide, tag, css) {
    // 更新elementStore中的记录
    if (elementStore.picplay && elementStore.picplay[id]) {
        const record = elementStore.picplay[id];
        if (x !== undefined) record.x = x;
        if (y !== undefined) record.y = y;
        if (w !== undefined) record.w = w;
        if (h !== undefined) record.h = h;
        if (images !== undefined) record.images = images;
        if (autoPlay !== undefined) record.autoPlay = autoPlay;
        if (animationType !== undefined) record.animationType = animationType;
        if (arrowState !== undefined) record.arrowState = arrowState;
        if (indicatorMode !== undefined) record.indicatorMode = indicatorMode;
        if (hide !== undefined) record.hide = hide;
        if (tag !== undefined) record.tag = tag;
        if (css !== undefined) record.css = css;
    }
    let elem = document.getElementById(id);
    if (!elem) return;
    
    // 更新位置和尺寸
    if (x !== undefined) elem.style.left = x + 'px';
    if (y !== undefined) elem.style.top = y + 'px';
    if (w !== undefined) elem.style.width = w + 'px';
    if (h !== undefined) elem.style.height = h + 'px';
    
    // 更新tag
    if (tag !== undefined) {
        if (tag) {
            elem.setAttribute('data-tag', tag);
        } else {
            elem.removeAttribute('data-tag');
        }
    }
    
    // 更新hide状态
    if (hide !== undefined) {
        elem.style.display = hide ? 'none' : '';
    }
    
    // 更新CSS类
    if (css !== undefined) {
        if (css) {
            elem.classList.add(css);
        } else {
            elem.classList.remove(css);
        }
    }
    
    // 重新渲染轮播
    layui.use('carousel', function() {
        layui.carousel.render({
            elem: '#' + id,
            width: w + 'px',
            height: h + 'px',
            anim: animationType || 'default',
            arrow: arrowState || 'hover',
            indicator: indicatorMode || 'inside',
            autoplay: autoPlay !== false,
            interval: typeof autoPlay === 'number' ? autoPlay * 1000 : 3000
        });
    });
}